
<!-- 成功案例 -->
<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      客户案例
    </p>
    <div class="banhhweer">
      <n-carousel show-arrow>
        <div class="carousel-img" v-for="(item, idx) in bannerse" :key="idx">
          <img :src="item.toutu" />
          <div class="pd pt20">
            <p class="fz32">{{ item.title }}</p>
            <p class="fz24">阅读详情</p>
          </div>
        </div>
      </n-carousel>
      <div
        class="compile-banner cf fz40 vertical-center"
        @click="showBannerPup"
      >
        点击编辑banner
      </div>
    </div>

    <div class="mt30">
      <n-input
        type="textarea"
        placeholder="请输入介绍"
        size="medium"
        clearable
        class="fz22"
        v-model:value="introduce"
        @blur="shujueer"
      ></n-input>
    </div>

    <p class="mt60 b fz26">车企合作</p>
    <div class="mt20">
      <abbskip
        type="2"
        puptitle="车企合作"
        className="ab"
        :hideUrl="true"
        :showintroduce="true"
      ></abbskip>
    </div>

    <p class="mt60 b fz26">地产建筑</p>
    <div class="mt20">
      <abbskip
        type="3"
        puptitle="地产建筑"
        className="ab"
        :hideUrl="true"
        :showintroduce="true"
      ></abbskip>
    </div>
    <p class="mt60 b fz26">充电运营</p>
    <div class="mt20">
      <abbskip
        type="4"
        puptitle="充电运营"
        className="ab"
        :hideUrl="true"
        :showintroduce="true"
      ></abbskip>
    </div>
    <n-modal v-model:show="showModal" preset="card" style="width: 900px">
      <template #header>
        <div>编辑轮播图</div>
      </template>
      <div class="banner-context">
        <div
          class="pr dsfsdrerewrewer"
          v-for="(item, idx) in pupbannerList"
          :key="idx"
        >
          <i
            class="iconfont dx-shanchu del-iconojert"
            @click="delBanner(idx)"
          ></i>
          <p class="img-box sz" @click="showUpimg(item)">
            <img :src="item.toutu" v-if="item.toutu" class="w100 h100" />
          </p>
          <p class="mt10">
            <n-input
              type="text"
              v-model:value="item.title"
              placeholder="标题"
              size="medium"
              clearable
            ></n-input>
          </p>
          <p class="mt10">
            <n-input
              type="text"
              placeholder="跳转地址"
              size="medium"
              v-model:value="item.url"
              clearable
            ></n-input>
          </p>
        </div>

        <div @click="addBanner">
          <p class="img-box vertical-center sz">
            <i class="iconfont dx-add fz40 z9"></i>
          </p>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button class="ml20" type="info" @click="showModal = false">
            取消
          </n-button>
          <n-button class="ml20" type="info" @click="querending">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModalsan"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传banner封面</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImgsan"
          types="abb上传banner封面"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturlsan">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { nextTick, ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import abbskip from "../pressCenter/components/abbskip.vue";
import { dxget, dialog, dxdel, dxpost } from "../../../util";
const bannerse = ref([]);
const pupbannerList = ref();
let videUrlsan = "";
const showModal = ref(false);
const photoShowModalsan = ref(false);
const pupDqobj = ref();
const introduce = ref();
const addBanner = () => {
  pupbannerList.value.push({
    toutu: "",
    title: "",
    url: "",
  });
};
const delBanner = (idx) => {
  pupbannerList.value.splice(idx, 1);
};

const getImgsan = (data) => {
  videUrlsan = data;
};

const showUpimg = (item) => {
  photoShowModalsan.value = true;
  pupDqobj.value = item;
};

const geturlsan = () => {
  photoShowModalsan.value = false;
  pupDqobj.value.toutu = videUrlsan;
};

const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 2,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};
const showBannerPup = () => {
  showModal.value = true;
  pupbannerList.value = JSON.parse(JSON.stringify(bannerse.value));
};

const shujueer = () => {
  upDataHome({ introduce: introduce.value });
};

const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 2 });
  bannerse.value = JSON.parse(data.banner);
  introduce.value = data.introduce;
};
initData();

const querending = async () => {
  showModal.value = false;
  bannerse.value = [];
  const strObj = JSON.stringify(pupbannerList.value);
  await upDataHome({ banner: strObj });
  bannerse.value = JSON.parse(strObj);
};
</script>
 <style scoped>
.banhhweer {
  position: relative;
}
.carousel-img {
  width: 100%;

  object-fit: cover;
}
.carousel-img img {
  width: 100%;
  height: 680px;
  object-fit: cover;
}
.compile-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  cursor: pointer;
}
.banhhweer:hover .compile-banner {
  display: flex;
}
.banner-context {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.img-box {
  height: 180px;
  background: #f8f8f8;
}
.del-iconojert {
  position: absolute;
  right: 5px;
  top: 0px;
  color: red;
  font-size: 26px;
  cursor: pointer;
  display: none;
}
.dsfsdrerewrewer:hover .del-iconojert {
  display: block;
}
</style>